<template>
  <div>
    <van-nav-bar title="首页" @click-right="onClickRight">
      <van-icon name="search" slot="right" />
    </van-nav-bar>

    <van-tabs v-model="active">
      <van-tab title="推荐">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>

        <div class="banner-bottom">

        </div>

        <van-row>
          <van-col span="12"> 
            <img src="http://i8.mifile.cn/v1/a1/685330bb-cb82-c3c3-e3cf-106c9b9a70e6!360x360.webp" class="big">

          </van-col>
          <van-col span="12">
            <img src="http://i8.mifile.cn/v1/a1/685330bb-cb82-c3c3-e3cf-106c9b9a70e6!360x360.webp" class="big">
          </van-col>

        </van-row>

      </van-tab>
      <van-tab title="手机">

      </van-tab>
      <van-tab title="智能">

      </van-tab>
      <van-tab title="笔记本">

      </van-tab>
      <van-tab title="家电">

      </van-tab>
      <van-tab title="双摄">

      </van-tab>
      <van-tab title="生活周边">

      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
$(document).ready(function () {
  alert(123);
});
export default {
  data() {
    return {
      active: 0,
      images: ["https://img.yzcdn.cn/2.jpg", "https://img.yzcdn.cn/2.jpg"]
    };
  },
  methods: {
    onClickRight() {}
  }
};
</script>

<style>
.banner-bottom {
  background-color: red;
  height: 80px;
  width: 100%;
  margin-bottom: 10px;

}
.big{
  width: 180px;
  height: 180px;
}
</style>
